<template>
  <div>
    <!--表格-->
    <el-table
        :data="dataList"
        stripe
        style="width: 100%"
        v-loading="dataListLoading"
        header-align="center"
        align="center"
        row-key="id"
        :tree-props="{children: 'children', hasChildren: $children.length>0}">

      >
      <el-table-column
          prop="id"
          label="序号"
          width="80">

      </el-table-column>

      <el-table-column
          prop="nickname"
          label="昵称"
          width="100">
        <template slot-scope="scope">
          <el-tag>
            {{ scope.row.nickname }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="avatar"
          label="头像">
        <template slot-scope="scope">
          <el-avatar size="large" :src="scope.row.avatar"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column
          prop="content"
          label="评论内容"
          width="180px">
        <template slot-scope="scope">
          <el-popover
              placement="top-start"
              trigger="hover"
              :content="scope.row.content">
            <div v-html="scope.row.content" slot="reference"></div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          prop="qq"
          label="QQ">
      </el-table-column>
      <el-table-column
          prop="page"
          label="评论页面">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.page===0" type="success">
            博客详情
          </el-tag>
          <el-tag v-if="scope.row.page===1" type="info">
            空间
          </el-tag>
          <el-tag v-if="scope.row.page===2" type="warning">
            友链
          </el-tag>
          <el-tag v-if="scope.row.page===3" type="danger">
            关于我
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="评论时间"
          width="180px">
      </el-table-column>
      <el-table-column
          prop="isPublished"
          label="公开">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isPublished" @change="updateStatus($event,'isPublished',scope.row.id)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          prop="isNotice"
          label="邮件提醒">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.isNotice" @change="updateStatus($event,'isNotice',scope.row.id)">

          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="操作"
          width="150px">
        <template slot-scope="scope">
          <el-button @click="info(scope.row.id)" size="mini">info</el-button>
          <el-button @click="remove(scope.row.id)" size="mini">del</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="prev, pager, next"
        :total="totalCount"
    >
    </el-pagination>
    <!--单条评论其他信息-->
    <CommentInfo v-if="commentInfoVisible" ref="commentInfo" />
  </div>
</template>

<script>
import CommentInfo from "@/views/modules/blog/comment/CommentInfo";

export default {
  name: "Comment",
  data() {
    return {
      dataList: [], //表格数据列表
      pageIndex: 1, //当前页
      pageSize: 10, //每页显示数据量
      totalCount: 0, //总页数
      dataListLoading: false, //加载,
      commentInfoVisible: false,
    }
  },
  methods: {
    getTableData() {
      this.dataListLoading = true;
      this.$http({
        url: '/comment/list',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
        }
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataListLoading = false;
          this.dataList = data.data.list;
          this.totalCount = data.data.totalCount
        }
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getTableData()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getTableData()
    },
    //点击公修改评论状态：公开、邮件提醒
    updateStatus(event, status, id) {
      this.$http({
        url: `/comment/update/${status}/${id}`,
        method: 'post'
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        } else {
          this.$message.error('修改失败');
          if (status === 'isPublished') {
            this.form.isPublished = !this.form.isPublished
          } else {
            this.from.isNotice = !this.form.isNotice;
          }

        }
      })
    },
    //删除单条评论
    remove(id) {
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: `comment/delete/${id}`,
          method: 'post'
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '删除成功',
              type: 'success',
            });
            if (this.totalCount === this.pageSize * (this.pageIndex - 1) + 1) {
              this.pageIndex--;
            }
            this.getTableData();
          } else {
            this.$message.error('删除失败');
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    info(id) {
      this.commentInfoVisible=true;
      //dom渲染完成后再执行
      this.$nextTick(() => {
        this.$refs['commentInfo'].init(id)
      })
    }
  },
  components: {
    CommentInfo
  },
  mounted() {
    this.getTableData();
  }
}
</script>

<style scoped>

</style>
